import { View, Text, Image, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './propBox.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import Blank from './blank';
import { IPLAND_OSS_HOST } from '../../constant';
import 'taro-ui/dist/style/components/icon.scss';
import moment from 'dayjs';

type IToolsBoxProps = T.IProps;
//@ts-ignore
// @connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
// export default class propModal extends Component<Partial<IToolsBoxProps>, any> {
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class propModal extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
    };
  }

  // 未使用
  getNotUsedBox(listData) {
    let toolsView = [];
    listData.map((item, index) => {
      let { propVO } = item;
      toolsView.push(
        <View
          className="notUsedBox"
          onClick={() => { }}
        >
          <Text className="title">{propVO.propName}</Text>
          <Text className="effect">{propVO.ruleType == 0 ? '中奖概率增加' : '魔力豆翻倍'}</Text>
          <Image className="prop" src={propVO.imgUrl || `${IPLAND_OSS_HOST}backpack/prop.png`} mode="heightFix" />
          {/* <Text className="use">去使用</Text> */}
          <Text className="period ">有效期至{moment(propVO.endTime).format('YYYY-MM-DD HH:mm:ss')}</Text>
        </View>,
      );
    });
    return toolsView;
  }

  // 已使用
  getUsedBox(listData) {
    let toolsView = [];
    listData.map((item, index) => {
      let { propVO } = item;
      toolsView.push(
        <View className="userdBox">
          <View
            className="usedItem"
            onClick={() => { }}
          >
            <Text className="title">{propVO.propName}</Text>
            <Text className="effect">{propVO.ruleType == 0 ? '中奖概率增加' : '魔力豆翻倍'}</Text>
            <Image className="prop" src={propVO.imgUrl || `${IPLAND_OSS_HOST}backpack/prop.png`} mode="heightFix" />
            <Text className="period ">有效期至{moment(propVO.endTime).format('YYYY-MM-DD HH:mm:ss')}</Text>
          </View>
          <View className="cover">
            <Image className="img" src={`${IPLAND_OSS_HOST}backpack/used.png`} mode="heightFix" />
          </View>
        </View>,
      );
    });
    return toolsView;
  }

  // 已失效
  getExpiredBox(listData) {
    let toolsView = [];
    listData.map((item, index) => {
      let { propVO } = item;
      toolsView.push(
        <View className="expiredBox">
          <View
            className="expiredItem"
            onClick={() => { }}
          >
            <Text className="title">{propVO.propName}</Text>
            <Text className="effect">{propVO.ruleType == 0 ? '中奖概率增加' : '魔力豆翻倍'}</Text>
            <Image className="prop" src={propVO.imgUrl || `${IPLAND_OSS_HOST}backpack/prop.png`} mode="heightFix" />
            <Text className="period ">有效期至{moment(propVO.endTime).format('YYYY-MM-DD HH:mm:ss')}</Text>
          </View>
          <View className="cover">
            <Image className="img" src={`${IPLAND_OSS_HOST}backpack/expired.png`} mode="heightFix" />
          </View>
        </View>,
      );
    });
    return toolsView;
  }

  async itemClick(item) {
    Taro.navigateTo({
      url: item.url,
    });
  }

  render() {
    let {
      main: { propList, form, totalPages, isLoadingList }
    } = this.props;
    let { status } = form;
    let { refresherTriggered } = this.state;
    return (
      <ScrollView
        className="scroll-view-prop"
        scrollY
        onScrollToLower={this._onScrollToLower}
      // refresherEnabled={true}
      // refresherTriggered={refresherTriggered}
      // onRefresherRefresh={this._onRefresherRefresh}
      // scrollWithAnimation
      >
        {status == 0 && <View className="PageBackpackPropBox">
          {propList.length != 0 ?
            <View className="toolsBox">{this.getNotUsedBox(propList)}</View>
            : <Blank content="暂无道具 快去获取吧～" />
          }
        </View>}
        {status == 1 && <View className="PageBackpackPropBox">
          {propList.length != 0 ?
            <View className="toolsBox">{this.getUsedBox(propList)}</View>
            : <Blank content="暂无道具 快去获取吧～" />
          }
        </View>}
        {status == 2 && <View className="PageBackpackPropBox">
          {propList.length != 0 ?
            <View className="toolsBox">{this.getExpiredBox(propList)}</View>
            : <Blank content="暂无道具 快去获取吧～" />
          }
        </View>}
        {propList && propList.length != 0 && form.pageNum + 1 != totalPages && <View className="status">加载中</View>}
        {!isLoadingList && propList.length != 0 && form.pageNum + 1 == totalPages && (
          <View className="status">没有更多了</View>
        )}
      </ScrollView>
    );
  }

  _onRefresherRefresh = () => {
    // const { refresherTriggered } = this.state;
    // if (refresherTriggered) return;
    // this.setState({
    //   refresherTriggered: true,
    // });
    // this.props.actions.action.commonChange('main.form.pageNum', 0);
    // this.props.actions.init();
    // setTimeout(() => {
    //   this.setState({
    //     refresherTriggered: false,
    //   });
    // }, 2000);
  };

  _onScrollToLower = () => {
    this.props.actions.action.propNextPage();
  };
}

//create by moon https://github.com/creasy2010/moon
